@extends('admin.base')

@section('content')
    <style>
        /*图标展示*/
        .site-doc-icon {
            width: 1050px;
            background-color: #fff
        }

        .site-doc-icon li {
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
            width: 127px;
            height: 105px;
            line-height: 25px;
            padding: 20px 0;
            margin-right: -1px;
            margin-bottom: -1px;
            border: 1px solid #e2e2e2;
            font-size: 14px;
            text-align: center;
            color: #666;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .site-doc-anim li {
            height: auto;
        }

        .site-doc-icon li .layui-icon {
            display: inline-block;
            font-size: 36px;
        }

        .site-doc-icon li .doc-icon-name,
        .site-doc-icon li .doc-icon-code {
            color: #c2c2c2;
        }

        .site-doc-icon li .doc-icon-code xmp {
            margin: 0
        }

        .site-doc-icon li .doc-icon-fontclass {
            height: 40px;
            line-height: 20px;
            padding: 0 5px;
            font-size: 13px;
            color: #333;
        }

        .site-doc-icon li:hover {
            background-color: #f2f2f2;
            color: #000;
        }

    </style>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">菜单列表
                            @can('system.action.store')
                                <button class="layui-btn layui-btn-sm layui-btn-normal" id="add_action"
                                        style="float: right;margin-top: 5px">添加操作权限
                                </button>
                            @endcan
                        </div>
                        <div class="layui-card-body" style="height: 700px; overflow: auto;">
                            <ul id="demo"></ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md9">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span class="title">添加操作权限</span>
                            @can('system.action.destroy')
                                <button class="layui-btn layui-btn-sm layui-btn-danger" id="delmenu"
                                        style="float: right;margin-top: 5px;display: none">删除操作权限
                                </button>
                            @endcan
                        </div>
                        <div class="layui-card-body" style="height: 700px; overflow: auto;">
                            <div id="menuFormDiv">
                                <div class="layui-form" lay-filter="menu_form" style="padding: 20px 30px 0 0;">
                                    <input type="hidden" name="id">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">请选择页面</label>
                                        <div class="layui-input-block">
                                            <select name="parent_id" lay-search>
                                                @forelse($permissions as $perm)
                                                    <option value="{{$perm['id']}}"
                                                            {{ isset($permission->id) && $perm['id'] == $permission->parent_id ? 'selected' : '' }} disabled>{{$perm['display_name']}}</option>
                                                    @if(isset($perm['_child']))
                                                        @foreach($perm['_child'] as $childs)
                                                            <option value="{{$childs['id']}}"
                                                                    {{ isset($permission->id) && $childs['id'] == $permission->parent_id ? 'selected' : '' }}  @if(isset($childs['_child']))disabled @endif >
                                                                &nbsp;&nbsp;┗━━{{$childs['display_name']}}</option>
                                                            @if(isset($childs['_child']))
                                                                @foreach($childs['_child'] as $lastChilds)
                                                                    <option value="{{$lastChilds['id']}}" {{ isset($permission->id) && $lastChilds['id'] == $permission->parent_id ? 'selected' : '' }} >
                                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┗━━{{$lastChilds['display_name']}}</option>
                                                                @endforeach
                                                            @endif
                                                        @endforeach
                                                    @endif
                                                @empty
                                                @endforelse
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">操作权限</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name" lay-verify="required"
                                                   placeholder="请输入 权限地址 例如：admin.category.create"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="display_name" lay-verify="required"
                                                   placeholder="请输入 名称 例如：消息管理"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>

                                    @can('system.permission.store')
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">&nbsp;</label>
                                            <input type="button" class="layui-btn layui-btn-normal float-right"
                                                   lay-submit lay-filter="*"
                                                   id="menus-update" value="提交">
                                        </div>
                                    @endcan
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    @can('system.action')
        <script>
            layui.use(['layer', 'table', 'form', 'tree'], function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                var tree = layui.tree;
                var nodes = '{!! json_encode($menus) !!}';
                //树形菜单初始化
                tree({
                    elem: '#demo' //传入元素选择器
                    , nodes: JSON.parse(nodes)
                    , click: function (e) {
                        console.log(e);
                        if (e.childs && e.childs.length >= 1) {
                            $(".title").html('添加操作权限');
                            $("#delmenu").hide();
                            $("input[name='display_name']").val('');
                            $("input[name='id']").val('');
                            $("input[name='name']").val('');
                            $("input[name='icon_id']").val('');
                            $("input[name='sort']").val(0);
                            $("input[name='route']").val('');
                            $("#icon_box i").removeClass().addClass('layui-icon');
                            $("#icon_box span").text('');
                            $("select[name='parent_id']").val(0);
                            return;
                        }
                        $(".title").html('编辑操作权限');
                        $("#delmenu").show();
                        $("input[name='display_name']").val(e.display_name);
                        $("input[name='name']").val(e.name);
                        $("input[name='id']").val(e.id);
                        $("input[name='icon_id']").val(e.icon.id);
                        $("input[name='sort']").val(e.sort);
                        $("input[name='route']").val(e.route);
                        $("#icon_box i").removeClass().addClass('layui-icon ' + e.icon.class);
                        $("#icon_box span").text(e.icon.name);
                        $("select[name='parent_id']").val(e.parent_id);
                        form.render();
                    },
                    drag: function (e, b) {

                    }
                });
                //监听表单提交
                form.on('submit(*)', function (data) {
                    var param = data.field;
                    //修改
                    if (param.id != '') {
                        http.post('{{route('system.action.update')}}', param, function (res) {
                            layer.msg('修改成功', {icon: 1});
                            setTimeout(function () {
                                window.location.reload();
                            }, 1500)
                        })
                    } else {
                        http.post('{{route('system.action.store')}}', param, function (res) {
                            layer.msg('添加成功', {icon: 1});
                            setTimeout(function () {
                                window.location.reload();
                            }, 1500)
                        })
                    }
                });
            });

            function showIconsBox() {
                var index = layer.load();
                http.get("{{route('admin.icons')}}", function (res) {
                    layer.close(index);
                    var html = '<ul class="site-doc-icon">';
                    $.each(res.datas, function (index, item) {
                        html += '<li onclick="chioceIcon(this)" data-id="' + item.id + '" data-class="' + item.class + '" data-name="' + item.name + '" >';
                        html += '   <i class="layui-icon ' + item.class + '"></i>';
                        html += '   <div class="doc-icon-name">' + item.name + '</div>';
                        html += '   <div class="doc-icon-code"><xmp>' + item.unicode + '</xmp></div>';
                        html += '   <div class="doc-icon-fontclass">' + item.class + '</div>';
                        html += '</li>'
                    });
                    html += '</ul>';
                    layer.open({
                        type: 1,
                        title: '选择图标',
                        area: ['1050px', '600px'],
                        content: html
                    })
                })
            }

            function chioceIcon(obj) {
                var icon_id = $(obj).data('id');
                $("input[name='icon_id']").val(icon_id);
                $("#icon_box").html('<i class="layui-icon ' + $(obj).data('class') + '"></i> <span> ' + $(obj).data('name') + '</span>');
                layer.closeAll();
            }

            //添加菜单
            $("#add_action").click(function () {
                $(".title").html('添加操作权限');
                $("#delmenu").hide();
                $("input[name='display_name']").val('');
                $("input[name='id']").val('');
                $("input[name='name']").val('');
                $("input[name='icon_id']").val('');
                $("input[name='sort']").val(0);
                $("input[name='route']").val('');
                $("#icon_box i").removeClass().addClass('layui-icon');
                $("#icon_box span").text('');
                $("select[name='parent_id']").val(0);

            });

            //删除菜单
            $("#delmenu").click(function () {
                layer.confirm('您确定要删除？', {
                    btn: ['确定'] //按钮
                }, function () {
                    var id = $("input[name='id']").val();
                    http.post('{{route('system.action.destroy')}}', {id: id}, function (res) {
                        layer.msg('删除成功', {icon: 1});
                        setTimeout(function () {
                            window.location.reload();
                        }, 1500)
                    })
                });
            });

        </script>
    @endcan
@endsection